<template>
  <div>
    <Teleport to="body">
      <div>
        <!-- Dialog -->
        <div class="dialog" v-show="flag">
          <!-- 头部 -->
          <div class="head"><slot name="head">默认头部</slot></div>
          <!-- 信息 -->
          <div class="info"><slot name="info">默认信息</slot></div>
          <!-- 底部 -->
          <div class="bottom">
            <slot name="foot">默认底部</slot>
            <div class="btn">
              <button @click="cancel">取消</button>
              <button @click="determine">确认</button>
            </div>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
let props = defineProps(["flag"]);
let emits = defineEmits(["cancel", "determine"]);
let data = ref({
  showFlag: false,
});

const cancel = () => {
  emits("cancel");
};
const determine = () => {
  emits("determine");
};
</script>

<style lang="less">
.dialog {
  position: fixed;
  top: 10%;
  left: calc(50% - 175px);
  width: 350px;
  height: 170px;
  background: aquamarine;
  .bottom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    button {
      margin-right: 5px;
    }
  }
}
</style>
